<script setup>
import {onBeforeMount, reactive, ref, toRefs} from "vue";
import {useItem} from "../../../../../store/index.js";
import {getConfigMapListHandler as getList } from "../../../../../api/configMap.js";

const props = defineProps({
  envFrom: {
    type: Array,
    default: [],
  },
  method: {
    type: String,
    default: "Create"
  },
  envFromItem: {
    type: Object
  }
})
const data = reactive({
  items: [],
  envFromItem: {
    prefix: '',
    configMapRef: {
      name: ''
    },
  }
})
const  envFromItemRef = ref()
const useItemer =useItem()
const {items,envFromItem,method} = toRefs(data)

onBeforeMount(()=>{
  if (props.method === 'Update'){
    data.envFromItem = props.envFromItem
  }
})
// 选择框展开调用接口查询数据
const visibleChanged=(visible)=>{
  if (visible){
    // 调用查询类别函数
    const getData = {
      clusterId: useItemer.clusterId,
      namespace: useItemer.namespace,
    }
    getList(getData).then((response)=>{
      data.items =  response.data.data.items
    })
  }
}
const emits = defineEmits(['closeEnvDialog'])


const submit = ()=>{
  props.envFrom.push(JSON.parse(JSON.stringify(data.envFromItem)))
  emits('closeEnvDialog')
}
</script>

<template>
    <el-form v-model="envFromItem" ref="envFromItemRef" label-position="right" label-width="120px">
      <div style="display: flex">
        <el-form-item v-if="props.method === 'Create'"  label="变量前缀" prop="prefix" style="margin-right: 30px">
          <el-input v-model.trim="envFromItem.prefix" placeholder="变量前缀" style="width: 140px"/>
        </el-form-item>
        <el-form-item label="选择ConfigMap" prop="configMapRef.name">
          <el-select v-model="envFromItem.configMapRef.name" placeholder="请选择ConfigMap" style="width: 240px" @visible-change="visibleChanged">
            <el-option
                v-for="item in items"
                :key="item.metadata.name"
                :label="item.metadata.name"
                :value="item.metadata.name"
            />
          </el-select>
        </el-form-item>
      </div>
    <!--按钮-->
      <div>
        <el-button v-if="props.method==='Create'" type="primary" @click="submit()">添加</el-button>
      </div>
    </el-form>
</template>

<style scoped>

</style>